<script setup lang="ts">
  import { useGetBillInfo } from './services'

  const { info, getBillInfoLoading, getInfo } = useGetBillInfo()

  defineOptions({
    name: 'OrderBillInfo',
  })

  defineExpose({
    info,
    getInfo,
  })
</script>

<template>
  <div v-if="info">
    <div
      v-loading="getBillInfoLoading"
      class="bg-color-white box-border-box padding-16px flex flex-column row-gap-10px"
    >
      <header>
        <div class="title-priamry">开票信息</div>
      </header>
      <main class="p-lr-16px flex flex-wrap column-gap-64px row-gap-5px">
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">开票类型：</div>
          <div class="flex align-center">{{
            info.ticketType === 1 ? '增值税普通发票' : '增值税专用发票'
          }}</div>
        </div>
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">抬头类型：</div>
          <div class="flex align-center">{{ info.headType === 1 ? '企业' : '个人' }}</div>
        </div>
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">发票抬头：</div>
          <div class="flex align-center">{{ info.header }}</div>
        </div>
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">发票税号：</div>
          <div class="flex align-center">{{ info.ticketTaxNumber }}</div>
        </div>
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">开票金额：</div>
          <div class="flex align-center">￥{{ (Number(info.ticketMoney) || 0).toFixed(2) }}</div>
        </div>
        <!-- <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">开票状态：</div>
          <div>
            <h-status v-if="info.openTicketStatus === 2">已开票</h-status>
            <h-status v-else type="warning">未开票</h-status>
          </div>
        </div> -->
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">申请时间：</div>
          <div class="flex align-center">{{ info.applyTime }}</div>
        </div>
        <!-- <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">开票时间：</div>
          <div class="flex align-center">{{ info.openTicketTime }}</div>
        </div> -->
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">电子邮箱：</div>
          <div class="flex align-center">{{ info.email }}</div>
        </div>
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">开票备注：</div>
          <div class="flex align-center">{{ info.remark }}</div>
        </div>
      </main>
    </div>
  </div>
</template>
